<template>
	<div v-loading="fullscreenLoading">
		<!--收货地址-->
		<div class="item-block" v-if="orderPaymentData.is_virtual == 0">
			<div class="block-text"> {{ $t('order.payment.shippingAddress') }}</div>

			<div clsas="address-list">
				<div class="address-item" @click="addAddressShow">
					<div class="add-address">
						<i class="el-icon-circle-plus-outline"></i>
						 {{ $t('order.payment.addShipAddress') }}
					</div>
				</div>

				<div
					class="address-item"
					v-for="(item, key) in memberAddress"
					:key="item.id"
					:class="addressId == item.id ? 'active' : ''"
					v-if="key < 3 || (addressShow && key >= 3)"
				>
					<div class="address-info">
						<div class="options">
							<div @click="editAddress(item.id)"> {{ $t('order.payment.edit') }}</div>
							<template v-if="item.is_default == 0">
								<el-popconfirm :title="$t('order.payment.tip1') " @onConfirm="deleteMemberAddress(item.id)">
                                    <div slot="reference"> {{ $t('order.payment.delete') }}</div>
                                </el-popconfirm>
							</template>
						</div>
						<div class="address-name">{{ item.name }}</div>
						<div class="address-mobile" @click="setMemberAddress(item.id)">{{ item.mobile }}</div>
						<div class="address-desc" @click="setMemberAddress(item.id)">{{ item.full_address }} {{ item.address }}</div>
					</div>
				</div>

				<div v-if="memberAddress.length > 3 && !addressShow" @click="addressShow = true" class="el-button--text address-open">
					<i class="el-icon-arrow-down"></i>
					 {{ $t('order.payment.moreShipAddr') }}
				</div>

				<div class="clear"></div>
			</div>
		</div>

		<!--购买虚拟类商品需填写您的手机号-->
		<div class="item-block" v-if="orderPaymentData.is_virtual == 1">
			<div class="block-text"> {{ $t('order.payment.tip2') }}</div>

			<el-form ref="form" size="mini" class="mobile-wrap" label-width="80px">
				<el-form-item :label="$t('order.payment.mobile') "><el-input :placeholder="$t('order.payment.imobile') " maxlength="11" v-model="orderCreateData.member_address.mobile"></el-input></el-form-item>
			</el-form>
		</div>

		<!--收货地址添加-->
		<el-dialog :title="addressForm.id == 0 ? $t('order.payment.addShipAddress')  : $t('order.payment.editShipAddr') " :visible.sync="dialogVisible" width="32%">
			<el-form ref="form" :rules="addressRules" :model="addressForm" label-width="80px">
				<el-form-item :label="$t('order.payment.fullName') " prop="name"><el-input v-model="addressForm.name" :placeholder="$t('order.payment.consigneeName') "></el-input></el-form-item>

				<el-form-item :label="$t('order.payment.cellPhone') " prop="mobile"><el-input v-model="addressForm.mobile" maxlength="11" :placeholder="$t('order.payment.consigneeSMobile') "></el-input></el-form-item>

				<el-form-item :label="$t('order.payment.telephone') "><el-input v-model="addressForm.telephone" :placeholder="$t('order.payment.consigneeSFixedTel') "></el-input></el-form-item>

				<el-form-item class="area" :label="$t('order.payment.area') " prop="area">
					<el-row :gutter="10">
						<el-col :span="7">
							<el-select prop="province" ref="province" v-model="addressForm.province_id" @change="getAddress(1)" :placeholder="$t('order.payment.selectAProvince') ">
								<el-option :label="$t('order.payment.selectAProvince') " value="0"></el-option>
								<el-option v-for="item in pickerValueArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-col>
						<el-col :span="7">
							<el-select ref="city" prop="city" v-model="addressForm.city_id" @change="getAddress(2)" :placeholder="$t('order.payment.selectACity') ">
								<el-option :label="$t('order.payment.selectACity') " value="0"></el-option>
								<el-option v-for="item in cityArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-col>
						<el-col :span="7">
							<el-select ref="district" prop="district" v-model="addressForm.district_id" :placeholder="$t('order.payment.selectADistrict') ">
								<el-option :label="$t('order.payment.selectADistrict') " value="0"></el-option>
								<el-option v-for="item in districtArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-col>
					</el-row>
				</el-form-item>

				<el-form-item :label="$t('order.payment.fullAddress') " prop="address"><el-input v-model="addressForm.address" :placeholder="$t('order.payment.locatingCell') "></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false"> {{ $t('order.payment.cancel') }}</el-button>
				<el-button type="primary" @click="addmemberAddress('form')"> {{ $t('order.payment.confirm') }}</el-button>
			</span>
		</el-dialog>

		<!--使用余额-->
		<!-- orderPaymentData.member_account.balance_total > 0 -->
		<div class="item-block" v-if="false">
			<div class="block-text"> {{ $t('order.payment.whetherToUseBalance') }}</div>

			<div class="pay-type-list">
				<div class="pay-type-item" :class="orderCreateData.is_balance ? '' : 'active'" @click="useBalance(0)">
                     {{ $t('order.payment.donTUseBalance') }}
                </div>
				<div class="pay-type-item" :class="orderCreateData.is_balance ? 'active' : ''" @click="useBalance(1)">
                     {{ $t('order.payment.useBalance') }}
                </div>
				<div class="clear"></div>
			</div>
		</div>

		<!--商品信息-->
		<div class="item-block">
			<div class="goods-list">
				<table>
					<tr>
						<td width="50%"> {{ $t('order.payment.commodity') }}</td>
						<td width="12.5%"> {{ $t('order.payment.price') }}</td>
						<td width="12.5%"> {{ $t('order.payment.amount') }}</td>
						<td width="12.5%"> {{ $t('order.payment.subtotal') }}</td>
					</tr>
				</table>
			</div>
		</div>

		<div v-for="(siteItem, siteIndex) in orderPaymentData.shop_goods_list" :key="siteIndex">
			<div class="item-block">
				<div class="goods-list">
					<table>
						<tr>
							<td colspan="5">
								<i class="store-icon iconfont iconmendian"></i>
								<router-link :to="'/shop-' + siteItem.site_id" target="_blank">{{ siteItem.site_name }}</router-link>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="item-block">
				<div class="goods-list">
					<table>
						<tr v-for="(goodsItem, goodsIndex) in siteItem.goods_list" :key="goodsIndex">
							<td width="50%">
								<div class="goods-info">
									<div class="goods-info-left">
										<router-link :to="{ path: '/sku-' + goodsItem.sku_id }" target="_blank">
											<img class="goods-img" :src="$img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(goodsIndex)" />
										</router-link>
									</div>
									<div class="goods-info-right">
										<router-link :to="{ path: '/sku-' + goodsItem.sku_id }" target="_blank">
											<div class="goods-name">{{ goodsItem.sku_name }}</div>
										</router-link>
									</div>
								</div>
							</td>
							<td width="12.5%" class="goods-price">{{ goodsItem.discount_price }} {{$t('commons.symbol') }}</td>
							<td width="12.5%" class="goods-num">{{ goodsItem.num }}</td>
							<td width="12.5%" v-if="goodsIndex == 0" :rowspan="siteItem.goods_list.length" class="goods-money">{{ siteItem.pay_money | moneyFormat }}  {{ $t('commons.symbol') }}</td>
						</tr>
					</table>

					<!--配送方式、留言、优惠券、店铺优惠-->
					<div class="goods-footer">
						<div class="goods-footer-left">
							<div v-if="orderPaymentData.is_virtual == 0">
								<div class="order-cell">
									<div class="tit">
										 {{ $t('order.payment.deliveryMethod') }}
										<span class="ns-text-color">
											<span
												v-if="
													orderPaymentData.delivery[siteItem.site_id].delivery_type == 'store' && orderPaymentData.delivery[siteItem.site_id].store_name
												"
											>
												{{ orderPaymentData.delivery[siteItem.site_id].store_name }}
											</span>
										</span>
									</div>
									<div v-if="siteItem.express_type.length > 0">
										<div
											class="express-item"
											v-for="(deliveryItem, deliveryIndex) in siteItem.express_type"
											:key="deliveryIndex"
											@click="selectDeliveryType(deliveryItem, siteItem.site_id, siteItem.express_type)"
											:class="orderPaymentData.delivery[siteItem.site_id].delivery_type == deliveryItem.name ? 'active' : ''"
											v-if="deliveryItem.name != 'local'"
										>
											{{ deliveryItem.title }}
										</div>
									</div>
									<div v-else-if="memberAddress.length == 0"><div class="box ns-text-color"> {{ $t('order.payment.addShippingAddr') }}</div></div>
									<div v-else><div class="box ns-text-color"> {{ $t('order.payment.tip3') }}</div></div>
								</div>
							</div>

							<div v-if="siteItem.coupon_list.length > 0">
								<div class="order-cell">
									<div class="tit"> {{ $t('order.payment.coupon') }}</div>
									<div v-if="siteItem.coupon_id">
										<span class="ns-text-color" @click="openSiteCoupon(siteItem.site_id, siteItem.coupon_list)"> {{ $t('order.payment.couponSelected') }}</span>
										<span class="ns-text-color" @click="openSiteCoupon(siteItem.site_id, siteItem.coupon_list)">
											{{ siteItem.coupon_money }}
                                            <span class="inline">  {{ $t('commons.symbol') }}</span>

										</span>
									</div>

									<div v-else><div class="box ns-text-color" @click="openSiteCoupon(siteItem.site_id, siteItem.coupon_list)"> {{ $t('order.payment.noCoupons') }}</div></div>
								</div>
							</div>

							<div>
								<div class="order-cell" v-if="siteItem.promotion_money > 0">
									<span class="tit"> {{ $t('order.payment.shopPromotions') }}</span>
									<div class="box text-overflow">
										<div class="order-cell" v-for="(promotionItem, promotionIndex) in siteItem.promotion" :key="promotionIndex">
											<div class="box text-overflow" v-if="promotionIndex == 'manjian'">
												<span class="ns-text-color"> {{ $t('order.payment.fullReduction') }}：</span>
												<span class="ns-text-color" v-for="(item, index) in promotionItem" :key="index">{{ item.discount_array.desc }}</span>
											</div>

											<div class="box text-overflow" v-if="promotionIndex == 'freeshipping'">
												<span class="ns-text-color"> {{ $t('order.payment.fullFreeShipping') }}：</span>
												<span class="ns-text-color">{{ promotionItem.area_names }}  {{ $t('order.payment.full') }}{{ promotionItem.price }} {{ $t('order.payment.freeShipping') }}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="goods-footer-right">
							<div>
								<div class="order-cell">
									<div class="tit"> {{ $t('order.payment.buyerMessage') }}</div>
									<div class="box">
										<el-input
											rows="3"
											type="textarea"
											:placeholder="$t('order.payment.tip4') "
											v-model="orderCreateData.buyer_message[siteItem.site_id]"
											class="buyer-message"
											@input="textarea"
											maxlength="140"
											show-word-limit
											resize="none"
										></el-input>
									</div>
								</div>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
		</div>

		<!--平台优惠券-->
		<div class="item-block" v-if="orderPaymentData && orderPaymentData.platform_coupon_list && orderPaymentData.platform_coupon_list.length > 0">
			<div class="block-text"> {{ $t('order.payment.platformCoupons') }}</div>

			<div class="order-cell platform-coupon">
				<div v-if="orderCreateData.platform_coupon_id">
					<span class="ns-text-color" @click="openPlatformCoupon"> {{ $t('order.payment.couponSelected') }}</span>
					<span class="ns-text-color" @click="openPlatformCoupon">
						{{ orderPaymentData.platform_coupon_money }}
                        <span class="inline">  {{ $t('commons.symbol') }}</span>

					</span>
				</div>

				<div v-else><div class="box ns-text-color" @click="openPlatformCoupon"> {{ $t('order.payment.noCoupons') }}</div></div>
			</div>
		</div>

		<!-- 总计 -->
		<div class="item-block">
			<div class="order-statistics">
				<table>
					<tr>
						<td align="right"> {{ $t('order.payment.theAmountOfGoods') }}：</td>
						<td align="left">{{ orderPaymentData.goods_money | moneyFormat }}  {{ $t('commons.symbol') }}</td>
					</tr>
					<tr v-if="orderPaymentData.is_virtual == 0">
						<td align="right"> {{ $t('order.payment.fare') }}：</td>
						<td align="left">{{ orderPaymentData.delivery_money | moneyFormat }}  {{ $t('commons.symbol') }}</td>
					</tr>
					<tr v-if="orderPaymentData.invoice_money > 0">
						<td align="right"> {{ $t('order.payment.taxes') }}：</td>
						<td align="left">{{ orderPaymentData.invoice_money | moneyFormat }}  {{ $t('commons.symbol') }}</td>
					</tr>
					<tr v-if="orderPaymentData.promotion_money > 0">
						<td align="right"> {{ $t('order.payment.preferential') }}：</td>
						<td align="left">{{ orderPaymentData.promotion_money | moneyFormat }}  {{ $t('commons.symbol') }}</td>
					</tr>
					<tr v-if="orderPaymentData.coupon_money > 0">
						<td align="right"> {{ $t('order.payment.shopCoupons') }}：</td>
						<td align="left">{{ orderPaymentData.coupon_money | moneyFormat }}  {{ $t('commons.symbol') }}</td>
					</tr>
					<tr v-if="orderPaymentData.platform_coupon_money > 0">
						<td align="right"> {{ $t('order.payment.platformCoupons') }}：</td>
						<td align="left">{{ orderPaymentData.platform_coupon_money | moneyFormat }}  {{ $t('commons.symbol') }}</td>
					</tr>
					<tr v-if="orderPaymentData.balance_money > 0">
						<td align="right"> {{ $t('order.payment.useBalance') }}：</td>
						<td align="left">{{ orderPaymentData.balance_money | moneyFormat }}  {{ $t('commons.symbol') }}</td>
					</tr>
				</table>
			</div>
			<div class="clear"></div>
		</div>
        <!--支付方式-->
        <div class="item-block">
            <div class="block-text"> {{ $t('order.payment.paymentMethod') }}</div>
            <div class="pay-list flex-row">
                <div class="sectionItem flex-col" v-for="(wallet, index) in wallets" :key="index">
                    <div class="outer flex-row">
                        <img
                            class="labels"
                            referrerpolicy="no-referrer"
                            :src="wallet.coin_img"
                        />
                        <div class="mods flex-col">
                            <span class="words">{{ wallet.name }}</span>
                            <div class="groups">
                                <span class="infos"> {{ $t('order.payment.availableBalance') }}</span>
                                <span class="info-none"></span>
                                <span class="word-bottom">{{ wallet.balance }}</span>
                            </div>
                        </div>
                        <img v-show="activePay !== index"
                             @click="changePay(index)"
                             class="label-none"
                             referrerpolicy="no-referrer"
                             src="@/assets/images/icon_select_none.png"
                        />
                        <img v-show="activePay === index"
                             @click="changePay(index)"
                             class="label-active"
                             referrerpolicy="no-referrer"
                             src="@/assets/images/icon_select_active.png"
                        />
                    </div>
                </div>

            </div>
            <span class="pay-pass"> {{ $t('order.payment.paymentPassword') }}</span>
            <el-input type="password" :placeholder="$t('order.payment.iPassword') " class="input-pass" v-model="password"></el-input>
        </div>
		<!--结算-->
		<div class="item-block">
			<div class="order-submit">
				<div class="order-money">
					 {{ $t('order.payment.common') }}{{ orderPaymentData.goods_num }} {{ $t('order.payment.amountsPayable') }}：
					<div class="ns-text-color">{{ orderPaymentData.pay_money | moneyFormat }} {{$t('commons.symbol') }} </div>
				</div>
				<el-button type="primary" class="el-button--primary" @click="orderCreate"> {{ $t('order.payment.orderSettlement') }}</el-button>
			</div>
			<div class="clear"></div>
		</div>

		<!--选择优惠券弹框-->
		<el-dialog :title="$t('order.payment.chooseACoupon') " :visible.sync="dialogCoupon" width="50%">
			<el-table ref="couponTable" :data="siteCoupon.data" highlight-current-row @row-click="selectCoupon" class="cursor-pointer">
				<el-table-column label="" width="55">
					<template slot-scope="scope">
						<div class="disabled-selected-wrap">
							<el-radio v-model="couponRadio" :label="scope.row"><i></i></el-radio>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="coupon_name" :label="$t('order.payment.denomination') " width="200"></el-table-column>
				<el-table-column :label="$t('order.payment.preferential') ">
					<template slot-scope="scope">
						<span v-if="scope.row.type == 'reward'">{{ scope.row.money }}</span>
						<span v-if="scope.row.type == 'discount'">{{ scope.row.discount }}  {{ $t('order.payment.discount') }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="use" :label="$t('order.payment.use') "></el-table-column>
				<el-table-column prop="time" :label="$t('order.payment.deadline') "></el-table-column>
			</el-table>
			<br />
			<div class="align-right">
				<el-button @click="dialogCoupon = false"> {{ $t('order.payment.cancel') }}</el-button>
				<el-button @click="saveCoupon()" type="primary"> {{ $t('order.payment.confirmSelection') }}</el-button>
			</div>
		</el-dialog>

		<!--选择平台优惠券弹框-->
		<el-dialog :title="$t('order.payment.choosePlatformCoupons') " :visible.sync="dialogPlatcoupon" width="50%" @close="savePlatformCoupon()">
			<el-table ref="platformCouponTable" :data="orderPaymentData.platform_coupon_list" highlight-current-row @row-click="selectPlatformCoupon" class="cursor-pointer">
				<el-table-column label="" width="55">
					<template slot-scope="scope">
						<div class="disabled-selected-wrap">
							<el-radio v-model="platformCouponRadio" :label="scope.row"><i></i></el-radio>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="platformcoupon_name" :label="$t('order.payment.denomination') " width="200"></el-table-column>
				<el-table-column prop="money" :label="$t('order.payment.preferential') "></el-table-column>
				<el-table-column :label="$t('order.payment.use') ">
					<template slot-scope="scope">
						<span class="ns-text-color-gray ns-font-size-sm" v-if="scope.row.at_least > 0"> {{ $t('order.payment.full1') }}{{ scope.row.at_least }} {{ $t('order.payment.available1') }}</span>
						<span class="ns-text-color-gray ns-font-size-sm" v-else> {{ $t('order.payment.anyAmountAvailable') }}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('order.payment.deadline') ">
					<template slot-scope="scope">
						<span>{{ $util.timeStampTurnTime(scope.row.end_time) }}</span>
					</template>
				</el-table-column>
			</el-table>
			<br />
			<div class="align-right">
				<el-button @click="dialogPlatcoupon = false"> {{ $t('order.payment.cancel') }}</el-button>
				<el-button @click="dialogPlatcoupon = false" type="primary"> {{ $t('order.payment.confirmSelection') }}</el-button>
			</div>
		</el-dialog>

		<!--配送方式  门店 -->
		<el-dialog title="选择门店" :visible.sync="dialogStore" width="50%">
			<el-table ref="singleTable" :data="storeList" highlight-current-row @row-click="selectStore" class="cursor-pointer">
				<el-table-column label="" width="55">
					<template slot-scope="scope">
						<el-radio v-model="storeRadio" :label="scope.row"><i></i></el-radio>
					</template>
				</el-table-column>
				<el-table-column prop="store_name" :label="$t('order.payment.denomination') " width="160"></el-table-column>
				<el-table-column prop="store_address" :label="$t('order.payment.address') "></el-table-column>
				<el-table-column prop="open_date" :label="$t('order.payment.businessHours') "></el-table-column>
			</el-table>
		</el-dialog>

		<!-- 配送方式 外卖 -->
		<el-dialog :title="$t('order.payment.deliveryTime') " :visible.sync="deliveryTime" width="400px">
			<el-form status-icon ref="ruleForm" label-width="100px">
				<el-form-item :label="$t('order.payment.deliveryTime') ">
					<el-col :span="11">
						<el-time-picker
							format="HH:mm"
							value-format="HH:mm"
							:placeholder="$t('order.payment.selectionPeriod') "
							:value="time"
							v-model="time"
							start="09:01"
							end="21:01"
							@change="bindTimeChange"
						></el-time-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="">
					<el-col :span="20">
						<div class="align-right">
							<el-button size="small" @click="deliveryTime = false"> {{ $t('order.payment.close') }}</el-button>
							<el-button type="primary" size="small" @click="setDeliveryTime(siteDelivery.site_id)"> {{ $t('order.payment.confirmSelection') }}</el-button>
						</div>
					</el-col>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!-- 支付密码 -->
		<el-dialog :title="$t('order.payment.useBalance') " :visible.sync="dialogpay" width="350px">
			<template v-if="orderPaymentData.member_account.is_pay_password == 0">
				<p> {{ $t('order.payment.tip5') }}</p>
				<p> {{ $t('order.payment.tip6') }}</p>
				<span slot="footer" class="dialog-footer">
					<el-button size="small" @click="dialogpay = false"> {{ $t('order.payment.notSetting') }}</el-button>
					<el-button size="small" type="primary" @click="setPayPassword"> {{ $t('order.payment.setUpNow') }}</el-button>
				</span>
			</template>
			<el-form v-else status-icon ref="ruleForm" label-width="100px">
				<el-form-item :label="$t('order.payment.paymentPassword') " class="pay-password-item">
					<!--添加一个不可见的input,欺骗浏览器自动填充-->
					<el-input type="password" class="pay-password hide-password" :maxlength="6"></el-input>
					<el-input type="password" class="pay-password" :maxlength="6" v-model="password" @input="input"></el-input>
				</el-form-item>
				<p class="ns-text-color forget-password" @click="setPayPassword"> {{ $t('order.payment.forgotPassword') }}</p>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import PicZoom from 'vue-piczoom';
import detail from './payment.js';
export default {
	name: 'payment',
	components: {
		PicZoom
	},
	mixins: [detail]
};
</script>

<style lang="scss" scoped>
@import './payment.scss';
</style>
